/**
 * Created by Dalyn on 2017/3/13.
 * 企业端-借款记录
 */
import React from "react";
import Relay from "react-relay";
import GetLoanRecordListMutation from "./mutation/GetLoanRecordListMutation"
import {Table} from 'antd';
import ReactKey from "../../util/ReactKey"
import Util from "../../util/Util"
import Pagination from "./Pagination"
import "./css/loanRecord.css";
import "./css/account_common.css";

export default class LoanRecord extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            listInfo: [],
            /*总共多少条*/
            totalResult: "",
            /*贷款总额*/
            sumMoney:"",
            /*贷款总利息*/
            sumInterest:"",
            /*每页条数*/
            pageItem: "",
            /*指定页码*/
            pageNum: 1,
            /*指定每页显示条数*/
            pageSize: 10,
            /*0-未还款，1-已还款*/
            status: "",
            /*借款公司名*/
            partyBEnName:"",
            /*后台错误提示*/
            hint: "",
            /*表格加载*/
            loading:true,
        };
        this.enterpriseId = sessionStorage.getItem("enterpriseId");
        this.confirm_index="whole";
        this.style = {
            /*confirm: {
                width: '90px',
                height: '28px',
                backgroundColor: "#f7f5f5",
                fontSize: "14px",
                color: "#333333",
                fontFamily: "Microsoft YaHei",
                border:"1px solid #ededed",
                borderRadius: "2px",
                marginLeft: "30px",
                padding:"5px 25px"
            },*/
           /* confirm_active: {
                width: '90px',
                height: '30px',
                backgroundColor: "#36b3b3",
                fontSize: "14px",
                color: "#fff",
                fontFamily: "Microsoft YaHei",
                borderRadius: "2px",
                marginLeft: "30px",
                padding:"5px 25px"
            },*/
            page_ensure:{
                width: '40px',
                height: '22px',
                lineHeight:"22px",
                fontSize: "12px",
                color: "#999",
                fontFamily: "Microsoft YaHei",
                backgroundColor: "transparent",
                border:"1px solid #ededed",
                borderRadius: "2px",
                marginLeft: "10px",
            },
            company: {
                width: "150px",
                height: "30px",
                // borderColor: "#bbbbbb",
                // marginTop: "15px"
            },
        };
        // this.listInfo=[
        //     {date:"2017-03-13",money:"123.123.123.00",days:"66",rate:"8.88%",interest:"10",purpose:"订单",order:"WWYK－20170228-0010",state:"待还款"},
        //     {date:"2017-03-13",money:"123.123.123.00",days:"66",rate:"8.88%",interest:"10",purpose:"订单",order:"WWYK－20170228-0010",state:"待还款"},
        //     {date:"2017-03-13",money:"123.123.123.00",days:"66",rate:"8.88%",interest:"10",purpose:"订单",order:"WWYK－20170228-0010",state:"待还款"},
        //     {date:"2017-03-13",money:"123.123.123.00",days:"66",rate:"8.88%",interest:"10",purpose:"订单",order:"WWYK－20170228-0010",state:"待还款"},
        // ]
    }
    componentWillMount() {
        this.myRelay();
    }

    myRelay() {
        Relay.Store.commitUpdate(
            new GetLoanRecordListMutation({
                pageNum: this.state.pageNum,
                pageSize: this.state.pageSize,
                status: this.state.status,
                partyBEnName:this.state.partyBEnName,
                partyBEnid:this.enterpriseId,
            }),
            {
                onFailure: () => {
                    console.log("请求失败")
                },
                onSuccess: (response) => {
                    let data = response.getLoanRecordList.data;
                    // console.log(data)
                    if (data.errorCode === "0") {

                        this.setState({
                            listInfo: data.loanRecordList,
                            totalResult: data.totalResult,
                            pageItem: data.loanRecordList.length,
                            sumMoney:data.sumMoney,
                            sumInterest:data.sumInterest,
                        },()=>{
                            this.setState({ loading: false });
                        });
                        // this.refs.page.value = this.state.pageNum;
                    } else {
                        this.setState({
                            hint: data.value,
                        });
                    }
                }

            }
        );
    }
    /*全部*/
    whole() {
        this.confirm_index="whole";
        this.refs.pagination.setState({
            text:1,
        })
        this.setState({
            status:"",
            loading:true,
            pageNum: 1
        },this.myRelay);
    }

    /*待还款*/
    pending() {
        this.confirm_index="pending";
        this.refs.pagination.setState({
            text:1,
        })
        this.setState({
            status: "0",
            loading:true,
            pageNum: 1
        }, this.myRelay);
    }

    /*已还款*/
    already() {
        this.confirm_index="already";
        this.refs.pagination.setState({
            text:1,
        })
        this.setState({
            status: "1",
            loading:true,
            pageNum: 1
        }, this.myRelay);
    }

    /*页码*/
    onSure(size,num){
        this.setState({
            pageSize: size,
            pageNum: num,
            loading:true,
        }, this.myRelay)
    }

    render() {
        const columns = [
            {
                title: '借款日期',
                dataIndex: 'startTime',
                key: 'startTime',
                render: (text, record) => {
                    return (
                        <span>{Util.dateFormat(record.startTime)}</span>
                    )
                }
            }, {
                title: '借款金额（元）',
                dataIndex: 'money',
                key: 'money',
                render: (text, record) => {
                    return (
                        <span>{Util.doubleFormat(record.money)}</span>
                    )
                }
            }, {
                title: '借款天数',
                dataIndex: 'region',
                key: 'region',
                render: (text, record) => {
                    return (
                        <span>{record.region}</span>
                    )
                }
            }, {
                title: '日利率（%）',
                dataIndex: 'dayRate',
                key: 'dayRate',
                render: (text, record) => {
                    return (
                        <span>{record.dayRate}</span>
                    )
                }
            }, {
                title: '利息（元）',
                dataIndex: 'interest',
                key: 'interest',
                onCellClick: (record, event) => {
                    // console.log(record);
                },
                render: (text, record) => {
                    return (
                        <span>{Util.doubleFormat(record.interest)}</span>
                    )
                }
            },{
                title: '借款用途',
                dataIndex: 'purpose',
                key: 'purpose',
                onCellClick: (record, event) => {
                    // console.log(record);
                },
                render: (text, record) => {
                    return (
                        <span>{record.purpose == 1 ? "订单" : "企业"}</span>
                    )
                }
            },{
                title: '订单',
                dataIndex: 'useNo',
                key: 'useNo',
                onCellClick: (record, event) => {

                },
                render: (text, record) => {
                    return (
                        <span title={record.useNo}>{record.useNo}</span>
                    )
                }
            },{
                title: '状态',
                dataIndex: 'status',
                key: 'status',
                onCellClick: (record, event) => {

                },
                render: (text, record) => {
                    return (
                        <span>{record.status == 0 ? "未还款" : "已还款"}</span>
                    )
                }
            }
        ];
        const listInfo = (null == this.state.listInfo || this.state.listInfo.length == 0) ? [] : this.state.listInfo;
        return (
            <div className="loan_rec_box">
                <div className="loan_rec_box_tab"></div>
                <span className={this.state.status==""? "loan_rec_tabBox_span_active" :"loan_rec_tabBox_span"} onClick={this.whole.bind(this)}>全部</span>
                <span className={this.state.status=="0"? "loan_rec_tabBox_span_active" :"loan_rec_tabBox_span"} onClick={this.pending.bind(this)}>待还款</span>
                <span className={this.state.status=="1"? "loan_rec_tabBox_span_active" :"loan_rec_tabBox_span"} onClick={this.already.bind(this)}>已还款</span>
                <div className="loan_rec_t">
                    <span className="loan_rec_tsp1">借款总金额：</span>
                    <span className="loan_rec_tsp account_red">{Util.doubleFormat(this.state.sumMoney)}</span>
                    <span className="loan_rec_tsp2">元</span>
                    <span className="loan_rec_tsp1">利息：</span>
                    <span className="loan_rec_tsp account_red">{Util.doubleFormat(this.state.sumInterest)}</span>
                    <span className="loan_rec_tsp2">元</span>
                </div>
                <Table
                    columns={columns}
                    dataSource={listInfo}
                    pagination={false}
                    rowKey={record => record.loanRecordId}
                    style={{width: '100%'}}
                    className="order_table"
                    // bordered
                    loading={this.state.loading}
                />
                <Pagination eachSize={this.state.pageSize} dataSize={this.state.totalResult} onSure={this.onSure.bind(this)} ref={'pagination'}/>
            </div>
        )
    }
}
